<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '河道信息',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="pa-4">
    <view class="river-drop flex mb-4" @click="closePopup">
      <view class="river-label">选择河道</view>
      <view class="flex-1">
        <wd-picker
          v-model="river"
          :columns="riverOptions"
          placeholder="请选择河道"
          value-key="id"
          label-key="title"
        />
      </view>
    </view>
    <view class="card card-info my-2">
      <image class="card-info_img" src="/static/icon/bg2.png" mode="aspectFill"></image>
      <view class="card-info_name text-xs text-white">美丽河湖-七房巷浜</view>
      <view class="card-info_text flex items-center pa-2">
        <image src="/static/icon/river1.svg" mode=""></image>
        <text class="flex-1 ml-1">善治巧管,“断头浜”变“绿腰带”</text>
        <wd-icon name="arrow-right" color="#A3A3A3" size="24rpx"></wd-icon>
      </view>
    </view>
    <view class="card card-map my-2">
      <map
        id="myMap"
        style="width: 100%; height: 100%"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        show-location
        @markertap="onMarkerTap"
        @tap="onMapTap"
      >
        <view
          v-if="popup.show"
          class="map-popup pa-4"
          :style="{ left: popup.x + 'rpx', top: popup.y + 'rpx' }"
        >
          <view class="popup-title flex items-center">
            <!-- <image class="popup-icon" src="/static/icon/dot-active.png"></image> -->
            <image
              class="popup-icon"
              mode="heightFix"
              src="https://preview.qiantucdn.com/58pic/21/67/26/35y58PICcxnx9QIXxPr558PIC_PIC2018.png!qt400"
            ></image>
            <text class="popup-text ml-2">{{ popup.title }}</text>
          </view>
          <view class="popup-row text-xs mt-4">
            <text class="popup-label">养护单位：</text>
            <text class="popup-value color-blue ml-1">{{ popup.company }}</text>
          </view>
          <view class="popup-row text-xs mt-2">
            <text class="popup-label">河长信息：</text>
            <text class="popup-value color-blue ml-1">{{ popup.name }}</text>
          </view>
          <view class="popup-row text-xs mt-2 flex items-center">
            <text class="popup-label">视频信息：</text>
            <image
              class="popup-play ml-2"
              src="https://uploadfile.huiyi8.com/2018/af/62/74/37/403805.jpg.270.jpg"
            ></image>
            <!-- <image class="popup-play ml-1" src="/static/icon/play.png"></image> -->
          </view>
        </view>
      </map>
    </view>
    <view class="card px-4" @click="closePopup">
      <view class="flex items-center justify-between py-4" @click="show = true">
        <view class="card-title text-sm">七房巷浜</view>
        <view class="text-xs text-gray">更多></view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river2.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">养护单位</view>
        <view class="card-row_value flex-1">浩宏环境</view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river3.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">河道河长</view>
        <view class="card-row_value flex-1">张三</view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river4.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">联系方式</view>
        <view class="card-row_value flex-1">15122222222</view>
      </view>
    </view>
  </view>
  <wd-popup v-model="show" custom-class="custom-popup" @close="handleClose">
    <view class="card-title mx-3 mb-4">七房巷浜</view>
    <view class="card px-4 my-2">
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river2.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">养护单位</view>
        <view class="card-row_value flex-1">浩宏环境</view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river3.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">负责人</view>
        <view class="card-row_value flex-1">张三</view>
      </view>
    </view>
    <view class="card px-4 my-2">
      <view class="card-row py-4">
        <view class="flex items-center">
          <image class="card-row_icon" src="/static/icon/river5.svg" mode="aspectFill"></image>
          <view class="card-row_label mx-2">河道简介</view>
        </view>
        <view class="card-row_value dec ml-6 mt-2">
          七房巷浜呈东西走向，东起万裕苑，西至春华路，流经万裕苑一社区，全长400m，河底宽10m，河口宽10m,河底高程1.5m。
        </view>
      </view>
    </view>
    <view class="card px-4 my-2">
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river6.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">区级河长</view>
        <view class="card-row_value flex-1">xxxx</view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river6.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">街道级河长</view>
        <view class="card-row_value flex-1">xxx</view>
      </view>
      <view class="card-row flex items-center py-4">
        <image class="card-row_icon" src="/static/icon/river6.svg" mode="aspectFill"></image>
        <view class="card-row_label mx-2">社区级河长</view>
        <view class="card-row_value flex-1">xxx</view>
      </view>
    </view>
    <view class="card no-border my-2">
      <view class="card-row pa-4 pb-0">
        <view class="flex items-center">
          <image class="card-row_icon" src="/static/icon/river7.svg" mode="aspectFill"></image>
          <view class="card-row_label mx-2">河道范围</view>
        </view>
      </view>
      <view class="pa-2" style="height: 250rpx">
        <map
          id="myMapLine"
          style="width: 100%; height: 100%"
          :latitude="latitude"
          :longitude="longitude"
          :polyline="polylines"
        ></map>
      </view>
    </view>
    <view class="card px-4 my-2">
      <view class="card-row py-4">
        <view class="flex items-center">
          <image class="card-row_icon" src="/static/icon/river8.svg" mode="aspectFill"></image>
          <view class="card-row_label mx-2">河道位置</view>
        </view>
        <view class="block mt-3">
          <view class="block-row">120.3733</view>
          <view class="block-row">31.56222</view>
        </view>
      </view>
      <view class="card-row py-4">
        <view class="flex items-center">
          <image class="card-row_icon" src="/static/icon/river9.svg" mode="aspectFill"></image>
          <view class="card-row_label mx-2">排口信息</view>
        </view>
        <view class="block mt-3">
          <view class="block-row">XXX-01</view>
          <view class="block-row">XXX-02</view>
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

const river = ref<number>(0)
const riverOptions = ref([])
const show = ref(false)
const mapMarkers = ref([])
const mapTrack = ref([])

const getRiverData = async () => {
  river.value = 1
  riverOptions.value = [
    { title: '全部河道', id: 0 },
    { title: '河道1', id: 1 },
    { title: '河道2', id: 2 },
  ]
}
const handleRiverChange = ({ value }) => {
  console.log(value)
}
// 中心点
const latitude = 22.540261
const longitude = 113.944855
// 标记点
const markers = ref([
  {
    id: 1,
    latitude: 22.540261,
    longitude: 113.944855,
    iconPath: '/static/map/dot.png',
    selectedIconPath: '/static/map/dot-active.png',
    width: 15,
    height: 15,
    title: '河道点位1',
    company: '单位名称1',
    name: '联系人1',
  },
  {
    id: 2,
    latitude: 22.535261,
    longitude: 113.949855,
    iconPath: '/static/map/dot.png',
    selectedIconPath: '/static/map/dot-active.png',
    width: 15,
    height: 15,
    title: '河道点位2',
    company: '单位名称2',
    name: '联系人2',
  },
])
// 轨迹
const polylines = ref([
  {
    points: [
      { latitude: 22.540261, longitude: 113.944855 },
      { latitude: 22.535261, longitude: 113.949855 },
    ],
    color: '#FF0000',
    width: 4,
  },
])

// 根据激活态生成 markers
const activeId = ref<number | null>(null)
//  弹窗
const popup = ref({ show: false, x: 0, y: 0, title: '', company: '', name: '' })
let ignoreTap = false
const onMarkerTap = async (e: any) => {
  ignoreTap = true
  const id = e.markerId ?? e.detail?.markerId
  activeId.value = id

  // 找到被点击的 marker
  const marker = markers.value.find((m) => m.id === id)
  if (!marker) return

  popup.value = {
    show: true,
    x: marker.longitude,
    y: marker.latitude,
    title: marker.title,
    company: marker.company,
    name: marker.name,
  }

  // 更新 markers，切换图标
  markers.value = markers.value.map((m) => ({
    ...m,
    iconPath: m.id === id ? '/static/map/dot-active.png' : '/static/map/dot.png',
    width: m.id === id ? 20 : 15, // 激活态图标更大
    height: m.id === id ? 20 : 15,
  }))

  setTimeout(() => (ignoreTap = false), 300)
}
const onMapTap = () => {
  if (ignoreTap) return
  closePopup()
}
const closePopup = () => {
  popup.value.show = false
  activeId.value = null
  markers.value.forEach((m) => {
    m.iconPath = '/static/map/dot.png'
    m.width = m.height = 20
  })
}

onMounted(() => {
  getRiverData()
})

defineExpose({ onMarkerTap })
</script>

<style lang="scss">
page {
  background: #f4f8fb;
  /* #ifdef H5 */
  min-height: 100%;
  /* #endif */
}
$white-color: #fff;
$primary-color: #2953ff;
.color-blue {
  color: $primary-color;
}
.card {
  background: #fff;
  border-radius: 24rpx;
}
:deep(.river-drop) {
  height: 64rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .river-label {
    color: $white-color;
    background: $primary-color;
    font-size: 26rpx;
    line-height: 64rpx;
    width: 140rpx;
    text-align: center;
  }
  .wd-picker {
    height: 64rpx;
    .wd-cell {
      border-radius: 0 12rpx 12rpx 0;
    }
    .wd-cell__wrapper {
      padding: 0 20rpx 0 0;
      height: 64rpx;
      align-items: center;
    }
  }
}
.card-info {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  position: relative;
  .card-info_img {
    width: 100%;
    height: 380rpx;
  }
  .card-info_name {
    position: absolute;
    top: 24rpx;
    left: 24rpx;
  }
  .card-info_text {
    color: #424659;
    font-size: 26rpx;
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }
}
.card-title {
  position: relative;
  width: fit-content;
  color: #333;
  font-weight: bold;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #2953ff;
    opacity: 0.2;
    height: 8rpx;
  }
}
.no-border {
  .card-row {
    border: none;
  }
}
.card-row {
  border-bottom: 1rpx solid #e5e5e5;
  &:last-child {
    border: none;
  }
  .card-row_icon {
    width: 36rpx;
    height: 36rpx;
  }
  .card-row_label {
    font-size: 26rpx;
    color: #1e1e1e;
  }
  .card-row_value {
    font-size: 26rpx;
    color: #666666;
    text-align: right;
    &.dec {
      color: #72737e;
      font-size: 24rpx;
      text-align: left;
      line-height: 32rpx;
    }
  }
}
:deep(.custom-popup.wd-popup) {
  background: #f7f8fa !important;
  width: 602rpx;
  border-radius: 18rpx;
  padding: 32rpx !important;
  box-sizing: border-box;
}
.block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  .block-row {
    background: #f7f8fa;
    color: #72737e;
    font-size: 24rpx;
    text-align: center;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 6rpx;
  }
}
.card-map {
  width: 100%;
  height: 452rpx;
  overflow: hidden;
}
.map-popup {
  background: rgba($color: #fff, $alpha: 0.8);
  position: absolute;
  z-index: 999;
  border-radius: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(8.629023551940918px);

  box-shadow: 0px 8.63px 25.89px 0px rgba(69, 69, 69, 0.07);
}
.popup-icon {
  // width: 28rpx;
  // height: 28rpx;
  width: 35rpx;
  height: 44rpx;
  flex-shrink: 0;
}
.popup-play {
  width: 32rpx;
  height: 32rpx;
}
.popup-text {
  font-weight: bold;
  color: #000000;
  font-size: 26rpx;
}
</style>
